// 弹窗复选
import React, { useState } from 'react';
import { Modal, Space, Progress, Tooltip } from 'antd';
import TRNotification from '#/utils/notification';

import styles from './index.less';

const ModalComponent = (props) => {
  const [visible, setVisible] = useState(true);
  const { value } = props;
  const _onCancel = () => {
    setVisible(false);
    props.onPress({ index: 0 });
  };
  return (
    <Modal
      width={1064}
      className={styles.modal}
      visible={visible}
      centered={true}
      footer={null}
      maskClosable={true}
      title={
        <div key="title" className={styles.modal_title}>
          电量完成率各交易单元明细
        </div>
      }
      onCancel={_onCancel}
    >
      <div className={styles.scrollBox}>
        <Space size={16} wrap>
          {value.map((t, i) => {
            return (
              <div className={styles.item} key={i}>
                <div className={styles.top}>
                  <Tooltip title={t.title}>
                    <div className={styles.title}>{t.title}</div>
                  </Tooltip>
                  <div className={styles.chart}>
                    <Progress
                      type="circle"
                      percent={t.radio}
                      width={34}
                      strokeColor={t.radio === '-' ? '#33373A' : '#3CD3D3'}
                      showInfo={!(t.radio > 100)}
                      format={(percent) => `${percent}`}
                    />
                    {t.radio > 100 ? <span className={styles.textNum}>{t.radio}</span> : ''}
                  </div>
                </div>
                <div className={styles.bottom}>
                  <div className={styles.btm_left}>
                    <div className={styles.label}>经营电量</div>
                    <div className={styles.power}>
                      {t.operate || t.operate == 0 ? t.operate : '-'}
                    </div>
                  </div>
                  <div className={styles.btm_right}>
                    <div className={styles.label}>结算电量</div>
                    <div className={styles.power}>
                      {t.settlement || t.settlement == 0 ? t.settlement : '-'}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </Space>
      </div>
    </Modal>
  );
};

class RadioBoxModal {
  __key__ = '';

  show = (props) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <ModalComponent
            {...props}
            onPress={(result) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(result);
            }}
          />
        ),
        duration: null,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new RadioBoxModal();
